<template>
  <div class="wrapper">
      <el-button @click="loading = !loading">查询</el-button>
    <tables
      :tableData="tableData"
      :tableColumns="tableColumns"
      @status-handle="statusHandle"
      @date-handle="dateHandle"
      @row-handle="rowHandle"
      @selection-handle="selectionHandle"
      :loading="loading"
      :mergeArr="mergeArr"
    >
      <!-- <el-table-column label="操作"> </el-table-column> -->
      <!-- <template slot="aa">
        <el-table-column label="状态" align="center" prop="voltageLevel" />
      </template> -->
      <template slot="checkBox">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
      </template>
      <template slot="index">
        <el-table-column type="index" label="序号" width="55" align="center">
        </el-table-column>
      </template>
      <template slot="handle">
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              class="handle-btn"
              type="text"
              @click="addInfo(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tables>
  </div>
</template>

<script>
import Tables from "@/components/ui/Tables.vue";
// import ChartMove from "@/components/chart/ChartMove";
export default {
  components: { Tables },
  props: {},
  data() {
    return {
      // 行数据-后台
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          status: 0
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          status: 1
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          status: 2
        }
      ],
      // 有多少列-后台
      tableColumns: [
        {
          prop: "date",
          label: "日期",
          show: true,
          width: 100,
          disabled: false
        },
        {
          prop: "name",
          label: "姓名",
          show: true,
          width: 100,
          disabled: false
        },
        {
          prop: "address",
          label: "地址",
          show: true,
          disabled: false
        },
        {
          prop: "status",
          label: "状态",
          show: true,
          disabled: false
        }
      ],
      // 需要合并的数据属性
      mergeArr:["date"],
      loading:false
    };
  },
  created() {},
  mounted() {},
  activated() {},
  updated() {},
  methods: {
    // 操作方法
    addInfo() {
      console.log(111);
    },
    // 电压等级字典翻译
    voltageLevelFormat(row, column) {
      return this.selectDictLabel(this.voltageLevelOptions, row.voltageLevel);
    },
    statusHandle(row) {
      console.log("状态", row);
    },
    dateHandle(row) {
      console.log("日期", row);
    },
    rowHandle(row) {
      console.log("行", row);
    },
    selectionHandle(rows) {
      console.log("多选选中的行", rows);
    }
  },
  computed: {},
  watch: {}
};
</script>
<style scoped></style>
